<template>
		<van-swipe :autoplay="3000" :width="clientW" v-if="banners">
		<van-swipe-item v-for="(banner, index) in banners" :key="index">
      <!-- 图片尺寸优化 -->
      <img :src="banner.thumb" height="100%" width="100%" @click="onClick(index)"/>
		</van-swipe-item>
		</van-swipe>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import {SHOP_BANNERS} from "@/api/shop";

export default {
  name: "sign-board",
  data() {
    const clientW =
      (document.body.clientWidth || document.documentElement.clientWidth);
    const signboardHeight = clientW ? clientW * 2 / 3 : 250;
    return {
      signboardHeight,
      clientW,
      banners: null,
    };
  },
  activated() {
    //这个clientW是为了解决微信中切换页面后，swipte轮播图片不显示的问题
      this.clientW = document.body.clientWidth || document.documentElement.clientWidth;
      
  },

  created() {
    this.$reqGet(SHOP_BANNERS, {centerId: this.user.centreId}, {hideLoading: true}).then(res => {
        this.banners = res.data.data;
    });
  },
  methods: {
    onClick(id) {
      if (this.banners[id].link) {
        this.banners[id].link=this.banners[id].link.replace(/&amp;/g,"&")
        location.href = this.banners[id].link;
      }
    }
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  }
};
</script>

<style lang="scss" scoped>
</style>